<template>
	<van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="refDisabled">
		<div class="content"  ref="pageInfo">
			
			<div class="cardlist">
				<div class="cardlist-i" @click="toShow(v)" v-for="(v,i) in userList" :key='i'>
					<div class="cardlist-i-top flex1">
						<div class="">
							<span>{{v.pat_name||''}}</span><span>{{v.pat_sex_name||''}}</span>
							<!-- <div v-if='v.is_self==true' class="tags">本人</div> -->
							<div v-if='v.is_self==true' class="tags">默认</div>
						</div>
						<i class='more_gIcon'></i>
					</div>
					<div class='cardlist-i-info flex1'>
						<div class="flex3">
							<div class="cardlist-i-info-img flex3">
								<div class="img pr">
									<span>诊</span>
									<img src="@/assets/img/index/card.png" alt="">
								</div>
							</div>
							电子就诊卡
						</div>
						<div class="cardlist-i-info-code">
							<img :src="'https://guahao.tcyy.org.cn/api/image?barcode='+v.pid" alt="">
							<!-- <div>{{v.pid}}</div> -->
						</div>
					</div>
				</div>
			</div>
			<div class="addBtn flex3" @click="toPageLink('/addVisitor')">
				<img src="@/assets/img/index/home_subscription.png" alt="">
				新增就诊人
			</div>
			<back-img></back-img>
		</div>
		
	</van-pull-refresh>
</template>

<script>
	export default {
		data() {
			return {
				userList: [],
				isLoading: false,
				scrollTop:0,
				refDisabled:false,

			};
		},
		created() {
			this.petList()
		},
		mounted(){
			let box = this.$refs.pageInfo;
			box.addEventListener('scroll',()=>{
				this.scrollTop = box.scrollTop;
			});
		},
		watch: {
			scrollTop(val){
				if(val==0){
					this.refDisabled=false
				}else{
					this.refDisabled=true
				}
			}
		},
		methods: {
			onRefresh() {
				this.petList()
				setTimeout(() => {
					this.isLoading = false;
				},500);
			},
			getImg(v) {
				// http://guahao.tcyy.org.cn/api/image?barcode=123456
				let url = "/api/image?barcode=" + v.pid;
				this.$axios.get(url).then(res => {
						console.log("res", res);

					})
					.catch(err => {
						console.log("err", err);
					});
			},
			petList() {
				let url = "/api/pat/list";
				this.$axios.get(url).then(res => {
						console.log("res", res);
						this.userList = res.pat_info
					})
					.catch(err => {
						console.log("err", err);
					});
			},
			toPageLink(url) {
				this.$router.push({
					path: url,
					query: {},
				})
			},
			toShow(v) {
				this.$router.push({
					path: '/visitorShow',
					query: {
						id: v.id
					},
				})
			},
		}
	};
</script>

<style lang="less" scoped>
	.content {
		min-height: 100vh;
		background-color: #f0f8f8;
		padding-bottom: calc(90px + env(safe-area-inset-bottom));

		.addBtn {
			width: 340px;
			height: 44px;
			background: linear-gradient(90deg, #5CD2A3 0%, #3EC6D9 100%);
			border-radius: 22px;
			font-size: 15px;
			font-family: PingFang;
			font-weight: 500;
			color: #FFFFFF;
			position: fixed;
			bottom: 50px;
			left: 18px;

			img {
				width: 19px;
				margin-right: 9px;
			}
		}

		.cardlist {
			padding: 12px 15px 0 14px;

			&-i {
				padding: 0 16px 13px 16px;
				background: #FFFFFF;
				border-radius: 5px;
				margin-bottom: 10px;

				&-info {
					padding: 0 19px 0 13px;
					height: 60px;
					background: rgba(92, 162, 250, 0.1);
					border-radius: 10px;
					font-size: 15px;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;

					&-code {
						font-size: 13px;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #333333;
						text-align: center;

						img {
							height: 40px;
							display: block;
							margin-bottom: 2px;
						}
					}

					&-img {
						width: 45px;
						height: 45px;
						background: #FFFFFF;
						border: 1px solid #1977FD;
						border-radius: 50%;
						margin-right: 11px;

						span {
							position: absolute;
							top: 8px;
							left: 9px;
							font-size: 9px;
							font-family: PingFang;
							font-weight: bold;
							color: #FFFFFF;
						}

						.img {
							width: 28px;
							height: 19px;

							img {
								width: 28px;
								height: 19px;
							}
						}
					}
				}

				&-top {
					padding: 12px 0;
					font-size: 15px;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;

					span {
						margin-right: 12px;
					}
				}
			}

			.tags {
				text-align: center;
				line-height: 16px;
				padding: 0 4px;
				min-width: 26px;
				height: 16px;
				border: 1px solid #1977FD;
				border-radius: 2px;
				font-size: 13px;
				font-family: PingFang;
				font-weight: 500;
				color: #1977FD;
				margin-right: 9px;
				display: inline-block;
			}
		}
	}
</style>